<script setup>
import Footer from "@/components/common/Footer.vue";
import {ref, onMounted, onBeforeUnmount} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import axios from 'axios'
import qs from 'qs'
// 响应式数据
const orderId = ref('')
const orders = ref({
  business: {}
})
const isShowDetailet = ref(false)
const businessList = ref([])
const foodList = ref([])
const token = localStorage.getItem('token');
// 获取路由实例
const route = useRoute()
const router = useRouter()
// 从路由中获取orderId
orderId.value = route.query.orderId

// 获取全部商家信息
const fetchBusinessDetails = async () => {
  try {
    const response = await axios.get('business/listAllBusiness',
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    businessList.value = response.data
    console.log(businessList.value)
  } catch (error) {
    console.error('获取商家信息失败:', error)
  }
}

// 获取所有食品信息
const fetchFoodDetails = async () => {
  try {
    const response = await axios.get('food/listAllFood',
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    foodList.value = response.data
  } catch (error) {
    console.error('获取食品信息失败:', error);
  }
}

// 获取订单信息
const getOrdersById = async () => {
  try {
    const response = await axios.post(
        'orders/getOrdersById',
        qs.stringify({orderId: orderId.value}),
        {
          headers: {
           "Authorization": `Bearer ${token}`,
          }
        }
    )
    const result = response.data
    if (result) {
      const business = businessList.value.find(b => b.businessId === result.businessId)
      if (business) {
        result.business = business
      } else {
        console.error('没有找到匹配的商家');
      }
    }
    const orderDetailetResponse = await axios.post('orders/listOrderDetailetByOrderId',
        qs.stringify({
          orderId: orderId.value
        }),
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    const detailetResult = orderDetailetResponse.data
    console.log(detailetResult)
    result.list = []
    detailetResult.forEach(odItem => {
      // 找到对应的 foodId
      const food = foodList.value.find(f => f.foodId === odItem.foodId)
      if (food) {
        // 将食物信息添加到订单的 list 中
        result.list.push({
          food: food,
          quantity: odItem.quantity
        })
      }
    })
    orders.value = result
  } catch (error) {
    console.error(error)
  }
}

// 控制订单明细显示与隐藏
const detailetShow = () => {
  isShowDetailet.value = !isShowDetailet.value
}
const toIndex = () => {

  axios.post('orders/updateOrderStatus?orderStatus=1&id='+orderId.value,{},{
    headers: {
      "Authorization": `Bearer ${token}`,
    }}).then(res=>{
    if(res.status===200){
      alert('订单已完成！')
      router.push({path: '/orderList'})
    }else {
      alert('支付失败请稍后重试！')
    }
  })

}

// 页面加载时获取订单信息
onMounted(async () => {
  await fetchFoodDetails()
  await fetchBusinessDetails()
  await getOrdersById()
  // 阻止返回到订单确认页面
  history.pushState(null, null, document.URL)
  window.onpopstate = () => {
    router.push({path: '/index'})
  }
})
// 清理 popstate 事件
onBeforeUnmount(() => {
  window.onpopstate = null
})
</script>

<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>在线支付</p>
    </header>
    <!-- 订单信息部分 -->
    <h3>订单信息：</h3>
    <div class="order-info">
      <p>
        {{ orders.business.businessName }}
        <i class="fa fa-caret-down" @click="detailetShow"></i>
      </p>
      <p>&#165;{{ orders.orderTotal }}</p>
    </div>
    <!-- 订单明细部分 -->
    <ul class="order-detailet" v-show="isShowDetailet">
      <li v-for="item in orders.list">
        <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
        <p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>&#165;{{ orders.business.deliveryPrice }}</p>
      </li>
    </ul>
    <!-- 支付方式部分 -->
    <ul class="payment-type">
      <li>
        <img src="@/assets/image/alipay.png" alt="">
        <i class="fa fa-check-circle"></i>
      </li>
      <li>
        <img src="@/assets/image/wechat.png" alt="">
      </li>
    </ul>
    <div class="payment-button">
      <button @click="toIndex">确认支付</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3 {
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}

.wrapper .order-info {
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-info p:last-child {
  color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet {
  width: 100%;
}

.wrapper .order-detailet li {
  width: 100%;
  box-sizing: border-box;
  padding: 1vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-detailet li p {
  font-size: 3vw;
  color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type {
  width: 100%;
}

.wrapper .payment-type li {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .payment-type li img {
  width: 33vw;
  height: 8.9vw;
}

.wrapper .payment-type li .fa-check-circle {
  font-size: 5vw;
  color: #38CA73;
}

.wrapper .payment-button {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
}

.wrapper .payment-button button {
  width: 100%;
  height: 10vw;
  border: none;
  /*去掉外轮廓线*/
  outline: none;
  border-radius: 4px;
  background-color: #38CA73;
  color: #fff;
}
</style>